<!-- 权限按钮 -->
<script lang="ts" setup>
import { computed } from 'vue'
import type { PropType } from 'vue'
import { Plus, Delete, Edit, Download, Upload, Minus, Search } from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/auth'

export type BTN_ICON_TYPE = '' | 'add' | 'del' | 'edit' | 'download' | 'upload' | 'minus' | 'search'

const props = defineProps({
  // 权限标识
  auth: {
    type: String,
    default: ''
  },
  // 类型
  type: {
    type: String,
    default: 'primary'
  },
  // 尺寸
  size: {
    type: String,
    default: ''
  },
  // 是否为朴素按钮
  plain: {
    type: Boolean,
    default: false
  },
  // 是否为圆形按钮
  circle: {
    type: Boolean,
    default: false
  },
  // 是否为圆角按钮
  round: {
    type: Boolean,
    default: false
  },
  // 是否为链接按钮
  link: {
    type: Boolean,
    default: false
  },
  // 图标类型
  iconType: {
    type: String as PropType<BTN_ICON_TYPE>,
    default: ''
  }
})

const authStore = useAuthStore()

/**
 * 设置按钮图标
 */
const setIcon = computed(() => {
  switch (props.iconType) {
    case 'add':
      return { icon: Plus }
    case 'del':
      return { icon: Delete }
    case 'edit':
      return { icon: Edit }
    case 'download':
      return { icon: Download }
    case 'upload':
      return { icon: Upload }
    case 'minus':
      return { icon: Minus }
    case 'search':
      return { icon: Search }
    default:
      return {}
  }
})

/**
 * 校验权限
 */
const checkAuth = computed(() => {
  const authRes = authStore.btnList.find((item) => item.value == props.auth)
  if (authRes && authRes.show) {
    return true
  }
  return false
})
</script>

<template>
  <el-button
    v-if="checkAuth"
    :type="type"
    :size="size"
    :plain="plain"
    :circle="circle"
    :round="round"
    :link="link"
    v-bind="setIcon"
  >
    <slot></slot>
  </el-button>
</template>
